<template>
  <view :class="$style.watch_live">
    <view :class="$style.watch_live_top">
      <view :class="$style.watch_live__top_group">
        <image :class="$style.watch_live__top_cytxImg" :src="cytxImg"></image>
        <view :class="$style.watch_live__top_message">{{ message }}</view>
      </view>
      <image :class="$style.watch_live__top_syImg" :src="syImg"></image>
    </view>

    <view :class="$style.watch_live__main">
      <view :class="$style.uni_margin_wrap">
        <swiper :class="$style.swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
          display-multiple-items="1" vertical="true" :current="tabIndex" @animationfinish="animationFinish">
          <swiper-item v-for="(item, index) in mediaUrlList" :key="index">
            <view :class="$style.swiper_item">
              <image :class="$style.watch_live__main_zbImg" :src="item.tbdz">
                <view :class="$style.watch_live__main_imgGroup">
                  <view :class="$style.watch_live__main_imgList">
                    <image :class="$style.watch_live__main_Img" :src="ckImg"></image>
                    <view :class="$style.watch_live__main_num">{{ item.llSl }}</view>
                  </view>
                  <view :class="$style.watch_live__main_imgList">
                    <image :class="$style.watch_live__main_Img" :src="scImg" @click="setMediaFavor"></image>
                    <view :class="$style.watch_live__main_num">{{ item.scSl }}</view>
                  </view>
                  <view :class="$style.watch_live__main_imgList">
                    <image :class="$style.watch_live__main_Img" :src="fxImg" @click="setMediaShare"></image>
                    <view :class="$style.watch_live__main_num">{{ item.fxSl }}</view>
                  </view>
                </view>
              </image>

            </view>
          </swiper-item>
        </swiper>
      </view>

    </view>

    <view :class="$style.watch_live__footer">

    </view>
  </view>
</template>

<script setup lang='ts'>
import cytxImg from '@/static/images/chat/cytx.png'
import syImg from '@/static/images/chat/sy.png'
import scImg from '@/static/images/chat/sc.png'
import ckImg from '@/static/images/chat/ck.png'
import fxImg from '@/static/images/chat/fx.png'
import wqImg from '@/static/images/chat/wq.png'
import { onMounted, ref } from 'vue';
import { defineComponent } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { useAuthStore } from '@/store'
import {
  insertMediaBrowse,
  insertMediaShare,
  insertMediaFavor,
  queryAlertMedia,

} from '@/api';
/**
 * 观看直播页面
 */
const authStore = useAuthStore()
const message = ref<any>('石门坎站  于5分钟前')
const itemMessage = ref<any>({})
const indicatorDots = false
const autoplay = false
const interval = 2000
const duration = 500
const timer = ref<any>()
const jqId = ref<any>()
const mediaUrlList = ref<any>([
  {
    jzId: 1,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '04c4b1b2491f4bee807b5ea0031a0478',
  },
  {
    jzId: 2,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '04c4b1b2491f4bee807b5ea0031a0476',
  },
  {
    jzId: 3,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '04c4b1b2491f4bee807b5ea0031a0479',
  },
  {
    jzId: 4,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '004',
  },
  {
    jzId: 5,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '005',
  },
  {
    jzId: 6,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '006',
  },
  {
    jzId: 7,
    tbdz: wqImg,
    llSl: 999,
    scSl: 999,
    fxSl: 999,
    dmtId: '007',
  },
])
const tabIndex = ref<any>(0)

function animationFinish({ detail: { current } }) {
  tabIndex.value = current
  mediaUrlList.value.map((item: any, index: any) => {
    if (tabIndex.value == index) {
      itemMessage.value = item
      console.log(itemMessage.value)
      setMediaBrowseNumber()
      // 这里的时间不要忘记，否则没有效果  
    } else {

    }
  })
  console.log('tabIndex.value', tabIndex.value)
}

//根据警情id查询相关联的多媒体信息(联勤)
function getList() {
  queryAlertMedia({ jqId: jqId.value, zhid: authStore.getOpenId }).then((res: any) => {
    console.log('查询警情关联的多媒体信息', res);
    if (res.result.resultCode == "000000") {
      mediaUrlList.value = res.data && res.data.map((item: any) => {
        return {
          url: item.dmtDz,
          type: item.dmtGs,
        }
      }) || []
    }
  }).catch((e: any) => {
    console.log('查询失败', e);
  })
}


onLoad((option) => {
  jqId.value = option.jqId
})

onMounted(() => {
  animationFinish({ detail: { current: 0 } })
  getList()
})

//媒体浏览
function setMediaBrowseNumber() {
  timer.value = setTimeout(() => {
    let params = {
      dmtId: itemMessage.value.dmtId || mediaUrlList[0].value.dmtId,
      zhId: authStore.getOpenId
    }
    insertMediaBrowse(params).then((res: any) => {
      getList()
    })
  }, 3000)
}
//新增分享
function setMediaShare() {
  let params = {
    dmtId: itemMessage.value.dmtId,
    zhId: authStore.getOpenId
  }
  insertMediaShare(params).then((res: any) => {
    getList()
  })
}

//新增收藏
function setMediaFavor() {
  let params: object = {
    dmtId: itemMessage.value.dmtId,
    ryZhId: authStore.getOpenId
  }
  insertMediaFavor(params).then((res: any) => {
    getList()
  })
}
</script>

<style lang='less' module>
.watch_live {
  background: #000;
  width: 100vw;
  height: 100vh;
  padding: 153rpx 0 0 0;
  box-sizing: border-box;

  .watch_live_top {
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .watch_live__top_group {
      display: flex;
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      height: 72rpx;
      line-height: 72rpx;
      text-shadow: 0rpx 3rpx 7rpx rgba(0, 0, 0, 0.42);

      .watch_live__top_cytxImg {
        width: 72rpx;
        height: 72rpx;
        margin-right: 21rpx;
      }
    }

    .watch_live__top_syImg {
      width: 58rpx;
      height: 58rpx;
    }
  }

  .watch_live__main {
    padding: 100rpx 0 0 0;
    box-sizing: border-box;

    .uni_margin_wrap {
      width: 100%;
      height: 100%;

      swiper {
        height: calc(100vh - 650rpx);
      }
    }

    .watch_live__main_zbImg {
      width: 100vw;
      position: relative;
      height: calc(100vh - 650rpx);
    }

    .watch_live__main_imgGroup {
      position: absolute;
      top: 180rpx;
      right: 20rpx;

      .watch_live__main_imgList {
        width: 72rpx;
        text-align: center;
        margin-bottom: 30rpx;

        .watch_live__main_Img {
          width: 72rpx;
          height: 72rpx;
        }

        .watch_live__main_num {
          font-size: 20rpx;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          margin-top: 10rpx;

        }
      }

    }
  }
}
</style>
